                
<template>
  <div class="user-edit">
    <Drawer :title="title" v-model="visible" width="1024" :mask-closable="false">
      <Scroll :height="height">
      <div style="width: 90%;margin: 10px auto;">
        <div style="background-color: rgba(139,139,139,0.6); font-size: 14px;font-family: '宋体';">
          <div style="width: 90%;background-color: #ffffff;margin: 0 auto;">
            <div class="paperStyle" id="page_content">
              <div style="margin: 20px 15px;line-height: 24px;font-family: 'fangsong';font-size:14px;color: #000;">
                <Row class="text-content">
                  <div style="height: 20px;"></div>
                  <div style="text-align: center;font-family: '微软雅黑'; "><h3>{{company}}{{organization}}派工单</h3></div>
                  <div style="height: 15px;"></div>
                  <div>
                    <span style="float: left;margin-left: 20px;">工作单位：{{data.dispatch_unit}}</span>
                    <span style="float: right;margin-right: 20px;">派工单编号：{{data.dispatch_code}} </span>
                  </div>
                  
                  <div style="width:100%; margin: 10px auto;">
                    <table class="gridtable">
                      <tr>
                        <td style="width：20%;">工作班成员：</td>
                        <td style="width：80%;">{{data.dispatch_men}}</td>
                      </tr>
                      <tr>
                        <td style="width：20%;">工作内容：</td>
                        <td style="width：80%;">{{data.dispatch_mission}}</td>
                      </tr>
                      <tr>
                        <td style="width：20%;">工作时间：</td>
                        <td style="width：80%;">{{data.begin_time}} 至 {{data.end_time}}</td>
                      </tr>
                      <tr>
                        <td style="width：20%;">返回签名（作业负责人）：</td>
                        <td style="width：80%;"></td>
                      </tr>
                      <tr>
                        <td style="width：20%;">派工人（单位负责人）：</td>
                        <td style="width：80%;"> <span style="padding-left: 50px;">{{data.dispatch_leader}}</span> </td>
                      </tr>
                    </table>
                  </div>
                  <div>
                    <span style="float: left;">主管领导： {{data.approve}}</span>
                    <span style="margin-left: 100px;">申请人：{{data.real_name}} </span>
                    <span style="float: right;margin-right: 20px;">日期：{{data.dispatch_time}} </span>
                  </div>
                </Row>
              </div>
            </div>
          </div>
        </div>
      </div>
      </Scroll>
      <div class="demo-drawer-footer">
        <Button @click="handleCancel" style="margin-right: 36px;" >确定</Button>
        <Button type="error" @click="handleApproval" icon="md-bonfire" style="margin-right: 36px;" :loading="submitLoading">审批</Button>
        <Button type="primary" @click="print" icon="ios-print-outline">打印</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import { getStore } from '@/libs/storage';
import { dateToString } from '@/libs/function.js';
import { updateDispatch } from '@/api/work';
import moment from 'moment';
import { parse } from 'date-fns/esm';
export default {
  name: 'view-vehicle',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object
    },
  },
  data() {
    return {
      visible: this.value,
      title: "查看派工单",
      height: 540,
      submitLoading: false,
      company: '',
      real_name: '',
      organization: ''
    }
  },
  methods: {
    init() {
      const userInfo = JSON.parse(getStore('userInfo'));
      this.company = userInfo.compamy;
      this.real_name = userInfo.real_name;
      this.organization = userInfo.organization.organization_name;
    },
    handleCancel() {
      this.visible = false;
      this.$emit("on-submit", true);
    },
    setCurrentValue(value) {
      this.visible = value;
    },
    print() {

    },
    handleApproval() {
      if (this.data.state === 1) {
        this.$Message.error('此派工单已经审批过了，无需再次审批！');
      } else {
        let params = {
          id: this.data.id,
          approve: this.real_name,
          approve_time: dateToString(new Date()),
          state: 1
        };
        this.submitLoading = true;
        updateDispatch(params).then(res => {
          this.submitLoading = false;
          if (res.code === 0) {
            this.data.approve = this.real_name;
            this.data.state = 1;
            this.$Message.success('审批成功！')
          }
        })
      }
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.init();
      this.$emit("input", value);
      
    }
  },
  computed: {
    
  },
  mounted() {
    this.init();
    this.height = Number(document.documentElement.clientHeight - 100);
  }
}
</script>
<style lang="less" scoped>
.demo-drawer-footer{
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
.gridtable {
  font-family: verdana, arial, sans-serif;
  font-size: 12px;
  color: #000000;
  border-width: 1px;
  border-color: #777777;
  border-collapse: collapse;
  width: 100%;
}

.gridtable th {
  border-width: 1px;
  padding: 1px;
  border-style: solid;
  border-color: #aaaaaa;
  background-color: #dedede;
}

.gridtable td {
  border-width: 1px;
  padding: 1px 5px;
  border-style: solid;
  border-color: #8b8b8b;
  background-color: #ffffff;
  height: 45px;
}
.text-content{
  margin: 46px 46px;
}
.text-content p{
  text-indent: 36px;
  font-size: 18px;
}
.paperStyle {
  border: solid 1px #bdbdbd;
  margin: 24px auto;
}
</style>